<template>
  <div style="padding:20px 250px">
    <div id="bar-chart"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { country: "巴西", population: 18203 },
        { country: "印尼", population: 23489 },
        { country: "美国", population: 29034 },
        { country: "印度", population: 104970 },
        { country: "中国", population: 131744 },
      ];

      const chart = new Chart({
        container: "bar-chart",
        autoFit: true,
        height: 500,
      });

      chart.data(data);
      chart.scale("population", { nice: true });
      chart.axis('country',{
        label: {
          style: {
            fontStyle: 'italic'
          },
          rotate: -120
        }
      })
      chart.coordinate().transpose();
      chart.tooltip({
        showMarkers: false,
      });
      chart.interaction("active-region");
      chart.interval().position("country*population").label('population');
      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
